<template>
	<div class="g-bd">
		<div class="g-row">
			<div id="j-categoryList">
				<div>
					<div style="height: 144px;">
						<div class="m-hd">
							<div class="m-topBar">
								<div class="bd">
									<div class="row">
										<a class="u-icon u-icon-home" href="/"></a>
										<a href="/">
											<i class="logo u-icon u-icon-logo"></i>
										</a>
										<div class="right">
											<a class="search" href="/search">
												<i class="u-icon u-icon-search1"></i>
											</a>
											<a class="cart" href="/cart">
												<i class="u-icon u-icon-cart"></i>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div style="width: 100%; height: 99px;"></div>
						<div style="position: fixed; left: 0px; width: 100%; top: 144px; z-index: 4;" class="">
							<div class="m-tabs scroll">
								<header>
									<div class="inner" style="position:relative;height:100%;width:100%;overflow:hidden;">
										<div class="list">
											<swiper :options="swiperOption" ref="mySwiper">
												<!-- slides -->
												<swiper-slide v-for="item in cateContent[id]" :key="item.id">
													<div class="tab" @click="changeCate(item.id)">
														<span class="txt">{{item.name}}</span>
													</div>
												</swiper-slide>
											</swiper>
										</div>

									</div>
								</header>
							</div>
						</div>
					</div>
					<div class="m-itemListFloor" data-id="1008009">
						<!-- <header class="hd">
							<p class="desc">MUJI等品牌制造商出品</p>
						</header> -->
						<div class="m-goodGrid">
							<ul class="list">
								<div>
									<li class="item" v-for="item in listData.data" :key="item.id">
										<router-link class="good" :to="{path:'/detail', query:{id: item.id}}">
											<div class="hd">
												<div class="wraper">
													<div class="m-lazyload">
														<img :src="item.image" alt="">
													</div>
												</div>
												<div class="desc">{{item.title}}</div>
											</div>
											<div class="tagWraper" v-if="item.status == 1">
												<p class="status newItem">{{item.status == 1 ? '新品': ''}}</p>
											</div>
											<!-- <div class="name">
												<span>花漾初绽四件套</span>
											</div> -->
											<div class="newItemDesc">{{item.title}}</div>
											<div class="price">
												<span class="new-price">
													<span>
														<span>¥</span>
														<span>{{item.price}}</span>	
													</span>
												</span>
												<span class="old-price">
													<del>￥{{item.o_price}}</del>
												</span>
											</div>
											<span></span>
										</router-link>
									</li>
									<span></span>
								</div>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import '@/assets/less/list.less'
// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
	data() {
		return {
			id: '',
			cateId: '',
			listData: {},
			cateContent: [],
			swiperOption: {
				slidesPerView: 3,
				freeMode: true,
			}
		}
	},
	components: {
		swiper,
		swiperSlide
	},
	mounted() {
		this.cateId = this.$route.query.pid
		this.id = this.$route.query.id
		this.cateContent =  JSON.parse(window.sessionStorage.getItem('cateContent'))
	},
	watch : {
		cateId (val) {
			this.getList(val)
		}
	},
	methods: {
		changeCate(id) {
			this.cateId = id;
		},
		getList(id) {
			// api.getList({id: id}).then(res => {
				this.listData = {
					"status": 0,
					"data": [
						{
							"id": 22,
							"title": "我修改了标题，这个标题可以很长的啊到底又多长呢我也不知道啊测试一下啦就这样吧应该不会长过这里了吧",
							"type": 11,
							"status": 1,
							"image": "/upload/20180420/24800.png",
							"price": 99,
							"o_price": 299
						}
					],
					"message": ""
				}
			// })
		}
	}
};
</script>